<template>
    <!-- 按钮框 -->
    <div style="padding: 20px; display: flex; justify-content: space-between;">
        <div>
        <el-button type="primary" @click="all2excel">批量导出(Excel)</el-button>
        <el-button type="info" @click="selected2excel">选择导出(Excel)</el-button>
        </div>
        <div style="display: flex;">
        <el-input placeholder="请输入客户名字" v-model="fullName" style="margin-right: 10px;"></el-input>
        <el-button type="success" @click="list(1)">搜索</el-button>
        </div>
    </div>
        <!-- 表格 -->
    <div style="padding-left: 20px;">
        <el-table 
            :data="customerList" 
            style="width: 100%" 
            border
            table-layout="auto"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection"/>
            <el-table-column prop="id" label="序号"   />
            <el-table-column prop="ownerName" label="负责人" />
            <el-table-column prop="activityName" label="所属活动"  />
            <el-table-column prop="fullName" label="姓名"/>
            <el-table-column prop="intentionStateValue" label="意向状态"  />
            <el-table-column prop="productValue" label="意向产品"  />
            <el-table-column prop="sourceValue" label="线索来源"  />
            <el-table-column prop="nextContactTime" label="下次联系时间" />
            <el-table-column label="操作"  >
                <template #default="scope">
                    <el-button type="primary" plain size="small" @click="router.push(`/dashboard/customer/info/${scope.row.id}`)">
                        详情
                    </el-button>
                </template>
            </el-table-column> 
        </el-table>
    </div>
       <!-- 分页 -->
   <div style="margin-top: 20px;">
      <el-pagination 
            background 
            layout="prev, pager, next" 
            :total="page.total"
            :page-size="page.pageSize"
            @current-change="currentChange" 
      />
   </div>
</template>
<script lang="ts" setup name="CustomerView">
import router from '@/router';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import { baseService } from '@/utils/httpReqest';
import { Customer } from '@/hooks/customer';
let selectIds: string[] = [];
let route = useRoute();
let fullName = ref("");
let customerList = ref<Customer[]>([]);
let page = reactive({
    pageSize: 8, //单页记录数
    total: 0,
    currentPage: 1,
})
let list = (currentPage = 1) => {
    baseService.doGet("/customer/list", {
        currentPage: currentPage,
        pageSize: 8,
        fullName: fullName.value
    }).then((res: any) => {
        if (res.code == 200) {
            customerList.value = res.data.data
            page.total = res.data.total;
        } else {
            ElMessage.error("获取客户列表失败")
        }
    })
}
let handleSelectionChange = (customerArry: Customer[]) => {
    selectIds = []
    for (const key in customerArry) {
        selectIds.push(customerArry[key].id)
    }
    console.log(selectIds);
}
let currentChange = (number: number) => {
    page.currentPage = number;
    list(number);
}
let all2excel = () => {
    let iframeEl = document.createElement("iframe");
    iframeEl.setAttribute("src", `http://localhost:8080/api/customer/all2excel?token=${localStorage.getItem('token')}`)
    iframeEl.style.display = 'none'
    document.body.append(iframeEl);
}
let selected2excel = () => {
    if (selectIds == null || selectIds.length==0) {
        ElMessage.error("请选择要导出的客户数据")
        return;
    }
    let ids = selectIds.join(",");
    let iframeEl = document.createElement("iframe");
    iframeEl.setAttribute("src", `http://localhost:8080/api/customer/all2excel?token=${localStorage.getItem('token')}&ids=${ids}`)
    iframeEl.style.display = 'none'
    document.body.append(iframeEl);
}
onMounted(() => {
    list(1);
})
</script>
<style scoped></style>